<template>
  <div class="dashboard-container">
    <a-row>
      <a-col :span="colSpan">
        <a-card :title="'节点级别('+currentNodeTitle+'级节点)'" size="small">
          <div class="ctn">
            <div class="logo node">
              <a-icon type="star" style="font-size: 30px;color: white"/>
            </div>
            <div class="value">{{nodename}}</div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="colSpan">
        <a-card title="节点IP" size="small">
          <div class="ctn">
            <div class="logo ip">
              <a-icon type="fire" style="font-size: 30px;color: white"/>
            </div>
            <div class="value">{{nodeip}}</div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="colSpan">
        <a-card title="注册机构数" size="small">
          <div class="ctn">
            <div class="logo org">
              <a-icon type="bank" style="font-size: 30px;color: white"/>
            </div>
            <div class="value">{{organizationCount}}</div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="colSpan" v-if="!virtual">
        <a-card title="下级节点数" size="small">
          <div class="ctn">
            <div class="logo level">
              <a-icon type="apartment" style="font-size: 30px;color: white"/>
            </div>
            <div class="value">{{prefixCount}}</div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <a-row style="margin-top: 10px">
      <a-col :span="12">
        <a-card title="每日注册标识" size="small">
          <div style="height: 200px" ref="dayechart">
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="标识解析" size="small">
          <div style="height: 200px" ref="countchart">
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import * as echarts from 'echarts'
  import {getNextNodeCount} from '@/api/node'
  import {registerOrganizationCount} from '@/api/organization'
  // import axios  from 'axios'
  import { analysis,register } from '@/api/count'

  export default {
    name: 'Dashboard',
    data() {
      return {
        currentNodeTitle: '',
        nodename: '',
        nodeip: '',
        prefixCount: 0,
        organizationCount: 0,
        colSpan: 6,
        virtual: false,
      }
    },
    computed: {
      ...mapGetters([
        'currentNode',
        'virtualNode',
      ])
    },
    activated() {

    },
    watch: {
      '$store.state.user.virtualNode' (value) {
        this.init(value, true)
      }
    },
    mounted() {
      this.init()
      let dayechart = echarts.init(this.$refs.dayechart);
      let countchart = echarts.init(this.$refs.countchart)
      analysis().then(res => {
        console.log(res.data)
        let option = {
          xAxis: {
            type: 'category',
            data: res.data.date
          },
          grid: {
            top: 10,
            bottom: 20,
            right: 10
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: res.data.count,
            type: 'line',
            smooth: true
          }]
        }
        countchart.setOption(option)
      })
      register().then(res => {
        console.log(res.data)
        let option = {
          xAxis: {
            type: 'category',
            data: res.data.date
          },
          grid: {
            top: 10,
            bottom: 20,
            right: 10
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: res.data.count,
            type: 'line',
            smooth: true
          }]
        }
        dayechart.setOption(option)
      })

    },
    methods: {
      init(value, virtualNodeChange) {
        if (virtualNodeChange) {
          if (value && value.nodename) {
            // 选择了虚节点
            this.colSpan = 8
            this.virtual = true
            this.setCurrentNodeTitle(value);
            this.$nextTick(res =>{
              this.nodename = value.nodename
              this.nodeip = value.nodeip
            })
          } else {
            this.colSpan = 6
            this.virtual = false
            this.setCurrentNodeTitle(this.currentNode);
            this.$nextTick(res =>{
              this.nodename = this.currentNode.nodename
              this.nodeip = this.currentNode.nodeip
            })
            this.getNextNodeCount();
          }
        } else {
          if (this.virtualNode && this.virtualNode.nodename) {
            this.colSpan = 8;
            this.virtual = true;
            // 选择了虚节点
            this.setCurrentNodeTitle(this.virtualNode);
            this.$nextTick(res =>{
              this.nodename = this.virtualNode.nodename
              this.nodeip = this.virtualNode.nodeip
            })
          } else {
            this.colSpan = 6;
            this.virtual = false;
            this.setCurrentNodeTitle(this.currentNode);
            this.$nextTick(res =>{
              this.nodename = this.currentNode.nodename
              this.nodeip = this.currentNode.nodeip
            })
            this.getNextNodeCount();
          }
        }
        this.registerOrganizationCount();
      },
      getNextNodeCount(){
        getNextNodeCount().then(res => {
          this.prefixCount = res.data
        })
      },
      registerOrganizationCount(){
        registerOrganizationCount().then(res => {
          this.organizationCount = res.data
        })
      },
      setCurrentNodeTitle(value) {
        switch (value.nodelevel) {
          case -1:
            this.currentNodeTitle = '根'
            break;
          case 0:
            this.currentNodeTitle = '原始根'
            break;
          case 1:
            this.currentNodeTitle = '一'
            break
          case 2:
            this.currentNodeTitle = '二'
            break
          case 3:
            this.currentNodeTitle = '三'
            break
          default:
            break
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .dashboard {

    &-container {
      margin: 30px;
    }

    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }

  /deep/ .ant-card-head {
    border-bottom: none;
  }

  /deep/ .ant-card {
    box-shadow: 5px 5px 5px #e8e8e8;
    margin-right: 10px;

    .ctn {
      width: 100%;
      display: inline-block;

      .logo {
        position: relative;
        float: left;
        padding: 5px;
        border-radius: 10px;

        &.node {
          background-color: #1890ff;
        }

        &.ip {
          background-color: rgba(100, 100, 232, 1);
        }

        &.org {
          background-color: #E6A23C;
        }

        &.level {
          background-color: #67C23A;
        }
      }

      .value {
        position: relative;
        float: right;
        font-weight: bold;
        line-height: 40px;
      }
    }
  }
</style>
